<template>
  <view v-if="visible" class="login-popup" :class="{ show: visible }">
    <view class="mask" @click="handleClose"></view>
    <view class="content">
      <view class="header">
        <text class="title">登录提示</text>
        <text class="close" @click="handleClose">×</text>
      </view>
      <view class="body">
        <text class="tips">申请获取您的个人信息</text>
        <text class="desc">用于完善会员资料，提供更好的服务</text>
      </view>
      <view class="footer">
        <button class="cancel-btn" @click="handleClose">取消</button>
        <button class="confirm-btn" @click="handleConfirm">确认登录</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { handleLogin } from '@/utils/auth'
import { useUserStore } from '@/stores/user'

const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}>()

const userStore = useUserStore()

const handleClose = () => {
  emit('update:visible', false)
}

const handleConfirm = async () => {
  try {
    const { code, userInfo } = await handleLogin()
    await userStore.login(code, userInfo)
    emit('success')
    handleClose()
  } catch (error) {
    console.error('登录失败：', error)
  }
}
</script>

<style lang="scss" scoped>
.login-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  pointer-events: none;

  &.show {
    .mask {
      opacity: 1;
    }

    .content {
      transform: translateY(0);
    }
  }

  .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
  }

  .content {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    pointer-events: auto;
  }

  .header {
    padding: 32rpx;
    text-align: center;
    border-bottom: 1rpx solid #eee;
    position: relative;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }

    .close {
      position: absolute;
      top: 32rpx;
      right: 32rpx;
      font-size: 40rpx;
      color: #999;
    }
  }

  .body {
    padding: 48rpx 32rpx;
    text-align: center;

    .tips {
      display: block;
      margin-bottom: 16rpx;
      font-size: 32rpx;
      color: #333;
    }

    .desc {
      font-size: 28rpx;
      color: #999;
    }
  }

  .footer {
    display: flex;
    padding: 32rpx;
    gap: 24rpx;

    button {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 32rpx;
      border-radius: 44rpx;

      &.cancel-btn {
        color: #666;
        background: #f5f5f5;
      }

      &.confirm-btn {
        color: #fff;
        background: #393F9D;
      }
    }
  }
}
</style>